How To Create a Button Text Swipe Animation Hover Effects Using Css Part-2

Posted By Bajarangi soft , Posted On 27-01-2021

A simple button is elevated using CSS and HTML adding an attractive glow effect,Using css animation here we have created swipe right or left buttons with hover effects animation buttons.

How To Create a Button Text Swipe Animation Hover Effects Using Css Part-2

Step 1:Create css file like style.css.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&family=Slabo+27px&display=swap");

*::after,
*::before {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0px;
padding: 0px;
}

ul,
li {
margin: 0px;
padding: 0px;
list-style: none;
font-family: "Roboto", sans-serif;
font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0px;
padding: 0px;
font-weight: 500;
font-family: "Roboto", sans-serif;
font-style: normal;
}

p {
margin: 0px;
padding: 0px;
font-family: "Roboto", sans-serif;
font-style: normal;
}

table,
thead,
tbody,
tr,
th,
td {
font-family: "Roboto", sans-serif;
font-style: normal;
}

hr {
margin: 0px;
padding: 0px;
}

input,
button,
select,
optgroup,
textarea {
font-family: "Roboto", sans-serif;
font-style: normal;
}

a,
strong,
label,
span,
img,
b {
font-family: "Roboto", sans-serif;
transition: all 0.3s ease 0s;
font-style: normal;
}

a,
a:hover,
a:focus,
a:active,
a:link {
outline: none;
text-decoration: none;
color: #000;
}

a.bs-btn:focus {
outline: 0;
box-shadow: none;
}

button.bs-btn:focus {
outline: 0;
box-shadow: none;
}

Step 2:Create html file and import style.css in it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <title>animaion button</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <style type="text/css">
            button.bs-btn:focus {
                outline: 0;
                box-shadow: none;
            }

            button.bs-btn {
                position: relative;
                display: inline-block;
                min-width: 170px;
                max-width: 170px;
                background: no-repeat;
                height: 55px;
                font-weight: 600;
                font-size: 15px;
                letter-spacing: 1px;
                border-radius: 0px;
                border: 2px solid #000;
                text-transform: uppercase;
                overflow: hidden;
                transition: 0.08s ease-in;
                -o-transition: 0.08s ease-in;
                -ms-transition: 0.08s ease-in;
                -moz-transition: 0.08s ease-in;
                -webkit-transition: 0.08s ease-in;
                cursor: pointer;
                z-index: 1;
                margin: 3px 0px;
            }

            button.bs-btn:after {
                content: "View Story";
                position: absolute;
                width: 100%;
                height: 100%;
                line-height: 54px;
                top: 0;
                left: 0;
                text-align: center;
                -webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            button.bs-btn:before {
                content: "Read it →";
                height: 100%;
                width: 100%;
                position: absolute;
                color: #383736;
                top: 0;
                left: -100%;
                line-height: 54px;
                opacity: 0;
                -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            button.bs-btn:hover {
                background: #383736;
            }

            button.bs-btn:hover:before {
                left: 0;
                opacity: 1;
                color: #fff;
            }
            button.bs-btn:hover:after {
                left: 100%;
                opacity: 0;
            }

            button.bs-btn.right-btn:hover {
                background: none;
            }

            button.bs-btn.right-btn:before {
                left: 100%;
                color: #383736;
                -webkit-transition: all 425ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
            }

            button.bs-btn.right-btn:hover:before {
                left: 0;
            }

            @media (max-width: 768px) {
                button.bs-btn {
                    min-width: 150px;
                    max-width: 150px;
                }
            }
        </style>
    </head>
    <body>
        <!-- main content -->
        <section class="main-content">
            <div class="container my-5">
                <h2>Button left and right Animation</h2>
                <button class="bs-btn left-btn">&nbsp;</button>
                <button class="bs-btn right-btn">&nbsp;</button>
            </div>
        </section>
        <!-- main content end -->

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
       <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    </body>
</html>